<template>
    <el-container>
        <PageHeader/>
        <el-main>
            <div class="content">
                <el-row class="sideBtn">
                    <SideBtn/>
                </el-row>
                <el-row class="block_title">
                    <span class="title_icon"></span>
                    <span class="title_text">我的购票车</span>
                    <el-col :span="6" class="delete">
                        <el-button type="danger" size="mini" @click="deleteCar()" :disabled="sectionArr.length == 0 && isSelect" v-if="tableData.body.length != 0">
                            <i class="iconfont icon-shanchu"></i> 删除
                        </el-button>
                        <el-button type="text" v-if="isSelect" @click="cancelCheck">取消</el-button>
                    </el-col>
                </el-row>
                <el-table
                    :data="tableData.body"
                    @selection-change="selection"
                    >
                    <!-- :default-sort = "{prop: 'bill_product_create_time', order: 'descending'}"
                    @sort-change="sortChange"
                    @selection-change="selection" -->
                    <el-table-column
                        v-if="isSelect"
                        type="selection"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="bill_product_create_time"
                        label="发布时间"
                        :formatter="formatCreateTime"
                        >
                        <!-- sortable="custom"
                        :sort-orders="['ascending', 'descending']" -->
                    </el-table-column>
                    <el-table-column
                        prop="acceptor_name"
                        label="承兑人"
                        width="230px">
                        <template slot-scope="scope">
                            <span class="bill_source">
                                <!-- <i class="iconfont icon-caipiao" v-if="scope.row.acceptor_type_id == 407"></i>
                                <i class="iconfont icon-shangpiao" v-if="scope.row.acceptor_type_id == 408"></i> -->
                            </span>
                            <span>{{ formatterAcceptor(scope.row) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="bill_sum_price"
                        label="票面金额(万)"
                        >
                        <!-- sortable="custom"
                        :sort-orders="['ascending', 'descending']" -->
                        <template slot-scope="scope">
                            <span>{{Number(scope.row.bill_sum_price) / 10000}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="bill_deadline_time_str"
                        label="到期时间">
                        <!-- sortable="custom"
                        :sort-orders="['ascending', 'descending']" -->
                    </el-table-column>
                    <el-table-column
                        prop="bill_flaw_names"
                        label="背书瑕疵">
                        <template slot-scope="scope">
                            <div :class="{'hpx-red-tips':scope.row.bill_flaw_ids != '1500'}">
                                {{ scope.row.bill_flaw_names ? scope.row.bill_flaw_names.join(',') : '' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="每十万扣"
                        prop="every_plus_interest">
                        <template slot-scope="scope">
                            <span class="hpx-red-tips" v-if="scope.row.bill_is_expired != 0">
                                {{ scope.row.bidding_mode == 3210 ? '一口价' + scope.row.every_plus_interest + '元' : (scope.row.every_plus_interest && scope.row.every_plus_interest != 0 ? '竞价' + scope.row.every_plus_interest + '元' : '竞价') }}
                            </span>
                            <span class="hpx-red-tips" v-if="scope.row.bill_is_expired == 0">
                                票已过期
                            </span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        prop="endorsementTimeAVG"
                        label="平均背书时长">
                    </el-table-column> -->
                    <el-table-column
                        prop="bill_status_name"
                        label="票据状态">
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary"
                                size="small" 
                                v-if="scope.row.bill_status_code == 801" 
                                @click="toBidding(scope.row)">
                                去竞价
                            </el-button>
                            <span v-if="scope.row.bill_status_code != 801">
                                票已下架
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="pagination">
                    <!-- <el-button type="primary" size="small" class="delete_btn" v-if="isSelect" :disabled="sectionArr.length == 0" @click="click_delete()">删除</el-button> -->
                    <el-pagination
                        @current-change="changePage"
                        @size-change="changeSize"
                        :current-page="tableData.footer.currentPage"
                        :page-sizes="[10, 15, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.footer.total">
                    </el-pagination>
                </el-row>
                <!-- 删除购票车警告弹框 -->
                <DialogInput ref="delete-warning" title="提示">
                    <div class="rem-dialog-con reserva-dialog">
                        <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                        <el-row>删除即为将票据移除购票车，是否确定移除已选择的{{billNo}}个票据信息？</el-row>
                    </div>
                    <span slot="Remfooter">
                        <el-button @click="closeDialog()" type="info" size="small" class="hpx-cancel-color dialog-button">否</el-button>
                        <el-button @click="confirmDelete()" type="primary" size="small" class="dialog-button">是</el-button>
                    </span>
                </DialogInput>
            </div>
        </el-main>
        <el-footer>
            <PageFooter/>
        </el-footer>
    </el-container>
</template>

<script lang="ts">
    import {Vue, Component, Prop, Emit} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'  
    import PageHeader from '@component/common/PageHeader.vue'
    import PageFooter from '@component/common/PageFooter.vue'
    import DialogInput from '@component/common/DialogInput.vue'
    import moment from 'moment' 
    import { ellipsis } from '@/util/format'
    import { mapActions } from 'vuex';
    import SideBtn from '@/component/common/SideBtn.vue'
    @Component({
        components:{
            Table,
            PageHeader,
            PageFooter,
            DialogInput,
            SideBtn
        },
        methods: {
            ...mapActions([
                'getMessageNumber',
                'getAllTips'
            ])
        }
    })
    export default class BillCar extends Vue {
        //是否显示删除勾选框
        isSelect = false
        //勾选的数据
        sectionArr = []
        tableData = {
            header: [
                {
                    label: '发布时间',
                    key: 'create_time'
                },
                {
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => ellipsis(row.acceptor_name, '...', 10)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price'
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time',
                    formatter: (row:any) => moment(row.bill_deadline_time).format('YYYY-MM-DD HH:mm')
                },
                {
                    label: '背书瑕疵',
                    key: 'bill_flaw_names'
                },
                {
                    label: '每十万扣',
                    key: 'every_plus_interest'
                },
                // {
                //     label: '平均背书时长',
                //     key: 'time'
                // },
                {
                    label: '票据状态',
                    key: 'bill_status_name'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
        sortMode = '-bill_product_create_time'
        //获取购票车数据
        async getBilllist () {
            let params = {
                // orderBy: this.sortMode,
                n: this.tableData.footer.pageSize,
                p: this.tableData.footer.currentPage
            }
            let res = await this.$http.get('bills/billCar',{params})
            if(res.status == 200){
                this.tableData.body = res.data.billcar_list
                this.tableData.footer.total = res.data.page_info.items_number
                this.tableData.footer.pageSize = res.data.page_info.items_per_page
                this.tableData.footer.currentPage = res.data.page_info.current_page
            }
        }
        //去竞价
        toBidding (row) {
            window.location.href = 'trade.html#/buyer/mybidding/detail/'+ row.bill_product_id
        }
        //显示/隐藏删除勾选框
        deleteCar () {
            this.isSelect ? this.$refs['delete-warning'].openDialog() : this.isSelect = true
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
        }
        //勾选
        selection (item) {
            this.sectionArr = item;
        }
        //点击删除
        // click_delete () {
        //     this.$refs['delete-warning'].openDialog()
        // }
        //
        get billNo () {
            return this.sectionArr.length
        }
        //确认删除
        async confirmDelete () {
            let willDelete = this.sectionArr.map(item => item.bill_car_id)
            let res = await this.$http.delete(`bills/billCar/${willDelete.join(',')}`)
            // this.$alert(res.msg,'提示',{
            //     confirmButtonText: '确定',
            //     customClass: 'custom-message-box'
            // })
            if(res.status == 200){
                this.$refs['delete-warning'].closeDialog()
                this.isSelect = false
                this.getAllTips()
                this.getBilllist()
            }
        }
        formatCreateTime (row) {
            return moment(row.bill_product_create_time).format('MM-DD HH:mm')
        }
        formatterAcceptor (row) {
            return ellipsis(row.acceptor_name, '...', 10)
        }
        // formatDeadlineTime (row) {
        //     return moment(row.bill_deadline_time).format('YYYY-MM-DD')
        // }
        closeDialog () {
            this.$refs['delete-warning'].closeDialog()
        }
        sortChange ( column, prop, order ) {
            if(!column.column){
                this.sortMode = '-bill_product_create_time'
            }else{
                let prop = column.prop == 'bill_deadline_time_format' ? 'bill_deadline_time' : column.prop
                if(column.order == 'ascending'){
                    this.sortMode = '+'+prop
                }else{
                    this.sortMode = '-'+prop
                }
            }
        }
        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getBilllist()  
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getBilllist()  
        }
        mounted () {
            this.getBilllist()
            this.getMessageNumber();
            this.getAllTips();
        }
    }
</script>

<style lang="scss" scoped>
    .el-container{
        min-height: 100%;
    }
    .el-main{
        min-height: calc(100% - 320px);
        padding-top: 96px;
    }
    .content{
        width: 84%;
        margin: 0px auto;
        padding: 20px 0;
        padding-bottom: 40px;
        .sideBtn{
            position: fixed;
            top: 50%;
            margin-top: -125px;
            right: 0px;
            z-index: 1000;
        }
        .bill_source{
            position: relative;
            top: 3px;
            .iconfont{
                font-size: 22px;
            }
        }
        .block_title{
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid $__color-primary;
            .title_icon{
                display: block;
                float: left;
                width: 2px;
                height: 18px;
                margin: 15px 6px 15px 0;
                background-color: $__color-primary;
            }
            .title_text{
                display: block;
                float: left;
                @extend .hpx-label;
                @extend .hpx-font-weight;
                font-size: 18px;
                margin-right: 40px;
            }
            .delete{
                float: right;
                text-align: right;
                .el-button{
                    border-radius: 4px;
                    font-size: 14px;
                }
            }
        }
    }
    .rem-dialog-con .warning{
        height: 30px;
        margin-bottom: 12px;
        .iconfont{
            font-size: 30px;
        }
    }
    .pagination{
        position: relative;
        margin-top: 15px;
        .el-pagination{
            position: absolute;
            right: 0;
            top: 0;
        }
    }
</style>
